/**
 * 工作台示例图
 */
import { FC, useEffect, useState } from "react";
import { observer, inject } from "mobx-react";
import { Popover, Space, Typography, Modal, Form, InputNumber } from "antd";
import {
  createList,
  ROWWORD,
  RROWWORD,
  computeSlot,
  WIDE,
  HEIGHT,
  SPACE,
} from "../../utils";
import { ITStore } from "../../store";
import "./index.less";

interface TProp {
  store: ITStore;
}

interface TSlotProp extends TProp {
  slotName: string | null;
  close: () => void;
}

type TPosi = {
  x: number;
  y: number;
};

type TPopCnt = {
  slotName: string;
};

const { Text } = Typography;

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const SlotModal: FC<TSlotProp | any> = inject("store")(
  observer(({ store, slotName, close }: TSlotProp) => {
    const {
      languageStore: { lang },
      workbenchStore: { workbenchSlotlist, changeWorkbenchSlotlist },
    } = store;

    const [form] = Form.useForm();

    useEffect(() => {
      workbenchSlotlist.some(({ x, y, name }) => {
        if (name === slotName) {
          form.setFieldsValue({
            x,
            y,
          });
          return true;
        }
        return false;
      });
      // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [slotName, form]);

    const formFinish = async (values: TPosi) => {
      const tempList = [...workbenchSlotlist];
      tempList.some((item) => {
        if (item.name === slotName) {
          item.x = values.x;
          item.y = values.y;
          return true;
        }
        return false;
      });
      changeWorkbenchSlotlist(tempList);
      closeModa();
    };

    const closeModa = () => {
      if (close) {
        form.resetFields();
        close();
      }
    };

    return (
      <Modal
        title={slotName}
        open={!!slotName}
        destroyOnClose={true}
        onOk={() => {
          form.submit();
        }}
        confirmLoading={false}
        onCancel={closeModa}
      >
        <Form {...layout} form={form} name="bottleForm" onFinish={formFinish}>
          <Form.Item name="x" label="x" rules={[{ required: true }]}>
            <InputNumber
              addonAfter={lang["langmmunit"]}
              style={{ width: "100%" }}
            />
          </Form.Item>
          <Form.Item name="y" label="y" rules={[{ required: true }]}>
            <InputNumber
              addonAfter={lang["langmmunit"]}
              style={{ width: "100%" }}
            />
          </Form.Item>
        </Form>
      </Modal>
    );
  })
);

const WorkbenchPlane: FC<TProp | any> = ({ store }: TProp): JSX.Element => {
  const {
    languageStore: { lang },
    globalStore: { mmPixRate },
    workbenchStore: {
      editWorkbenchData,
      changeWorkbenchSlotlist,
      workbenchSlotlist,
    },
  } = store;

  // 修改瓶子坐标弹窗
  const [editSlotName, setEditSlotName] = useState<string | null>(null);

  const [rowList, setRowList] = useState<number[]>([]);

  const [rrowList, setRrowList] = useState<number[]>([]);

  const [columnList, setColumnList] = useState<number[]>([]);

  const [rcolumnList, setRcolumnList] = useState<number[]>([]);

  const [slotHeight, setSlotHeight] = useState<number>(0);

  const [slotWide, setSlotWide] = useState<number>(0);

  const [slotMargin, setSlotMargin] = useState<number>(0);

  const PopContent = ({ slotName }: TPopCnt) => {
    let slotInfo: any = null;
    workbenchSlotlist.some((item) => {
      if (item.name === slotName) {
        slotInfo = item;
        return true;
      }
      return false;
    });
    return (
      <Space direction="vertical">
        <Text>
          x: {slotInfo?.x ? slotInfo?.x : "--"}{" "}
          <Text type="secondary">({lang["langmmunit"]})</Text>
        </Text>
        <Text>
          y: {slotInfo?.y ? slotInfo?.y : "--"}{" "}
          <Text type="secondary">({lang["langmmunit"]})</Text>
        </Text>
      </Space>
    );
  };

  useEffect(() => {
    const { row, rrow, column, rcolumn, slotList } = editWorkbenchData;

    setRowList(createList(row || 0));

    setRrowList(createList(rrow || 0));

    setColumnList(createList(column || 0));

    setRcolumnList(createList(rcolumn || 0));

    changeWorkbenchSlotlist(
      computeSlot({ row, rrow, column, rcolumn, slotList })
    );
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [editWorkbenchData]);

  useEffect(() => {
    setSlotHeight(HEIGHT * mmPixRate);
    setSlotWide(WIDE * mmPixRate);
    setSlotMargin(SPACE * mmPixRate);
  }, [mmPixRate]);

  const slotClick = (slotName: string) => {
    setEditSlotName(slotName);
  };

  const closeSlotModal = () => {
    setEditSlotName(null);
  };

  return (
    <>
      <div className="workbenchplane">
        <div
          className="bord"
          style={{
            paddingLeft: slotMargin,
            paddingTop: slotMargin,
          }}
        >
          {rowList.map((rowItem) => {
            return (
              <div
                className="row"
                key={rowItem}
                style={{
                  marginBottom: slotMargin,
                  height: slotHeight,
                }}
              >
                {columnList.map((colItem) => {
                  const slotName = ROWWORD[rowItem] + (colItem + 1);
                  return (
                    <Popover
                      key={colItem}
                      content={<PopContent slotName={slotName} />}
                      title={slotName}
                    >
                      <div
                        className="slot"
                        style={{
                          width: slotWide,
                          height: slotHeight,
                          marginRight: slotMargin,
                        }}
                        onClick={() => {
                          slotClick(slotName);
                        }}
                      >
                        <div className="label">{slotName}</div>
                      </div>
                    </Popover>
                  );
                })}
              </div>
            );
          })}

          {rrowList.map((rowItem) => {
            return (
              <div
                className="row"
                key={rowItem}
                style={{
                  marginBottom: slotMargin,
                  height: slotHeight,
                }}
              >
                {rcolumnList.map((colItem) => {
                  const slotName = RROWWORD[rowItem] + (colItem + 1);
                  return (
                    <Popover
                      key={colItem}
                      content={<PopContent slotName={slotName} />}
                      title={slotName}
                    >
                      <div
                        className="slot"
                        key={colItem}
                        style={{
                          width: slotWide,
                          height: slotHeight,
                          marginRight: slotMargin,
                        }}
                        onClick={() => {
                          slotClick(slotName);
                        }}
                      >
                        <div className="label">{slotName}</div>
                      </div>
                    </Popover>
                  );
                })}
              </div>
            );
          })}
        </div>
      </div>
      <SlotModal slotName={editSlotName} close={closeSlotModal} />
    </>
  );
};

export default inject("store")(observer(WorkbenchPlane));
